<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style1.css" />
  </head>
  <body>
    <button id="signInButton">sign in</button>
    <button id="signOutButton">sign out</button>
    <div id="message">
      <p>you have sign in as <span id="userName">  </span> With the email <span id="userEmail"></span></p>

    </div>

    <script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js";
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
      import {
        getAuth,
        GoogleAuthProvider,
        signInWithPopup,
        signOut,
        onAuthStateChanged,
      } from "https://www.gstatic.com/firebasejs/10.4.0/firebase-auth.js";

      // Your web app's Firebase configuration
      const firebaseConfig = {
        apiKey: "AIzaSyCoN7QWWYQe_7IyayyfVHY983FnjAT3AxY",
        authDomain: "a-2f2d9.firebaseapp.com",
        projectId: "a-2f2d9",
        storageBucket: "a-2f2d9.appspot.com",
        messagingSenderId: "330503631515",
        appId: "1:330503631515:web:754c527d5a618a16becc3e",
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const auth = getAuth();
      const provider = new GoogleAuthProvider();

      const signInButton = document.getElementById("signInButton");
      const signOutButton = document.getElementById("signOutButton");
      const message = document.getElementById("message");
      const userName =document.getElementById("userName");
      const userEmail =document.getElementById("userEmail");

      signOutButton.style.display = "none";
      message.style.display = "none";

      const userSignIn = async() => {
        signInWithPopup(auth, provider)
        .then((result) => {
          const user = result.user
          console.log(user);
        }).catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
        });
      }

      const userSignOut = async () => {
        signOut(auth).then(() => {
          alert("You have signed out successfully!");
        }).catch((error) => {})
      }

      onAuthStateChanged(auth, (user) => {
        if (user) {
          signOutButton.style.display = "block";
          message.style.display = "block";
          userName.innerHTML = user.displayName;
          userEmail.innerHTML = user.email;
        } else {
          signOutButton.style.display = "none";
          message.style.display = "none";

        }
      })

      signInButton.addEventListener("click", userSignIn);
      signOutButton.addEventListener("click", userSignOut);
      
    </script>
    
    <script src="script.js"></script>
  </body>
</html>
